<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>种植小知识 - 植蔬记</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 配置Tailwind主题 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4CAF50',
                        secondary: '#8BC34A',
                        accent: '#FFC107',
                        light: '#F5F5F5',
                        dark: '#2E7D32',
                        danger: '#F44336',
                        success: '#4CAF50',
                        warning: '#FF9800',
                        info: '#2196F3',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
                        'card-hover': '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
                    },
                },
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .card-transition {
                transition: all 0.3s ease-in-out;
            }
        }
    </style>
</head>
<body class="bg-gray-50 text-gray-800 min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="sticky top-0 z-50 bg-white shadow-md">
        <div class="container mx-auto px-4 py-3 flex items-center justify-between">
            <div class="flex items-center space-x-2">
                <button id="backButton" class="p-2 rounded-full hover:bg-gray-100 transition-colors duration-200">
                    <i class="fa fa-arrow-left text-gray-600 text-lg"></i>
                </button>
                <h1 class="text-xl font-bold text-primary">种植小知识</h1>
            </div>
            <div class="flex items-center space-x-4">
                <button class="p-2 rounded-full hover:bg-gray-100 transition-colors duration-200">
                    <i class="fa fa-search text-gray-600 text-lg"></i>
                </button>
                <button class="p-2 rounded-full hover:bg-gray-100 transition-colors duration-200">
                    <i class="fa fa-user text-gray-600 text-lg"></i>
                </button>
            </div>
        </div>
    </header>

    <!-- 主要内容区域 -->
    <main class="flex-1 container mx-auto px-4 py-6">
        <!-- 页面标题与副标题 -->
        <div class="mb-6 text-center">
            <h2 class="text-2xl font-bold text-primary">探索园艺的乐趣</h2>
            <p class="text-gray-500 mt-2">了解更多种植技巧，让您的菜园充满生机</p>
        </div>

        <!-- 搜索栏 -->
        <div class="relative mb-6">
            <input
                type="text"
                id="searchInput"
                placeholder="搜索种植小知识..."
                class="w-full py-3 px-5 pr-12 rounded-full border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-200 shadow-sm"
            />
            <i class="fa fa-search absolute right-5 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
        </div>

        <!-- 分类标签 -->
        <div class="flex overflow-x-auto scrollbar-hide space-x-2 mb-6 pb-2">
            <button class="category-btn whitespace-nowrap px-5 py-2 rounded-full bg-primary text-white font-medium text-sm transition-all duration-200 shadow-sm">
                全部
            </button>
            <button class="category-btn whitespace-nowrap px-5 py-2 rounded-full bg-white text-gray-600 font-medium text-sm transition-all duration-200 hover:bg-gray-100 shadow-sm">
                基础种植
            </button>
            <button class="category-btn whitespace-nowrap px-5 py-2 rounded-full bg-white text-gray-600 font-medium text-sm transition-all duration-200 hover:bg-gray-100 shadow-sm">
                浇水技巧
            </button>
            <button class="category-btn whitespace-nowrap px-5 py-2 rounded-full bg-white text-gray-600 font-medium text-sm transition-all duration-200 hover:bg-gray-100 shadow-sm">
                施肥管理
            </button>
            <button class="category-btn whitespace-nowrap px-5 py-2 rounded-full bg-white text-gray-600 font-medium text-sm transition-all duration-200 hover:bg-gray-100 shadow-sm">
                病虫害防治
            </button>
            <button class="category-btn whitespace-nowrap px-5 py-2 rounded-full bg-white text-gray-600 font-medium text-sm transition-all duration-200 hover:bg-gray-100 shadow-sm">
                收获技巧
            </button>
        </div>

        <!-- 知识卡片列表 -->
        <div id="tipsContainer" class="space-y-4">
            <!-- 卡片将通过JavaScript动态生成 -->
        </div>
    </main>

    <!-- 底部导航Tab -->
    <nav class="tab-bar fixed bottom-0 left-0 right-0 flex items-center justify-around py-2 border-t border-gray-200 bg-white">
        <a href="home.html" class="tab-item flex flex-col items-center py-2 px-3 text-gray-500">
            <i class="fa fa-home text-lg"></i>
            <span class="text-xs mt-1">首页</span>
        </a>
        <a href="growing-plants.html" class="tab-item flex flex-col items-center py-2 px-3 text-gray-500">
            <i class="fa fa-leaf text-lg"></i>
            <span class="text-xs mt-1">菜园</span>
        </a>
        <a href="task.html" class="tab-item flex flex-col items-center py-2 px-3 text-gray-500">
            <i class="fa fa-tasks text-lg"></i>
            <span class="text-xs mt-1">任务</span>
        </a>
        <a href="reminders.html" class="tab-item flex flex-col items-center py-2 px-3 text-gray-500">
            <i class="fa fa-bell text-lg"></i>
            <span class="text-xs mt-1">提醒</span>
        </a>
        <a href="profile.html" class="tab-item flex flex-col items-center py-2 px-3 text-gray-500">
            <i class="fa fa-user text-lg"></i>
            <span class="text-xs mt-1">我的</span>
        </a>
    </nav>

    <!-- 知识详情模态框 -->
    <div id="tipModal" class="fixed inset-0 z-50 flex items-center justify-center hidden">
        <div class="absolute inset-0 bg-black bg-opacity-50 backdrop-blur-sm" id="modalOverlay"></div>
        <div class="relative bg-white rounded-3xl w-[90%] max-w-lg max-h-[90vh] overflow-y-auto">
            <div id="modalHeader" class="p-5 pb-2 flex justify-between items-center">
                <h2 id="modalTitle" class="text-xl font-bold text-gray-800">知识详情</h2>
                <button id="closeModal" class="p-2 rounded-full hover:bg-gray-100 transition-colors duration-200">
                    <i class="fa fa-times text-gray-600"></i>
                </button>
            </div>
            <div class="p-5">
                <h3 id="modalTipTitle" class="text-xl font-bold text-primary mb-4">种植小知识标题</h3>
                <div class="flex items-center text-sm text-gray-500 mb-4">
                    <span id="modalTipCategory" class="px-3 py-1 bg-green-100 text-primary rounded-full mr-2">分类</span>
                    <span id="modalTipDate" class="text-gray-500">发布日期</span>
                </div>
                <div id="modalTipContent" class="text-gray-700 space-y-4 leading-relaxed">
                    知识内容将在这里显示...
                </div>
                <div class="mt-6 pt-4 border-t border-gray-100">
                    <h4 class="font-medium text-gray-700 mb-2">相关标签</h4>
                    <div id="modalTipTags" class="flex flex-wrap gap-2">
                        <!-- 标签将通过JavaScript动态生成 -->
                    </div>
                </div>
            </div>
            <div class="p-5 pt-2 flex justify-end space-x-3">
                <button id="shareTipBtn" class="px-4 py-2 border border-gray-200 text-gray-600 font-medium rounded-full shadow-sm hover:bg-gray-50 transition-colors duration-200">
                    <i class="fa fa-share-alt mr-1"></i> 分享
                </button>
                <button id="collectTipBtn" class="px-4 py-2 border border-primary text-primary font-medium rounded-full shadow-sm hover:bg-primary/5 transition-colors duration-200">
                    <i class="fa fa-star-o mr-1"></i> 收藏
                </button>
            </div>
        </div>
    </div>

    <script>
        // 种植小知识数据
        const plantingTips = [
            {
                id: 1,
                title: "如何选择适合家庭种植的蔬菜品种",
                content: "选择适合家庭种植的蔬菜品种非常重要，应考虑以下几个因素：\n1. 生长周期：对于初学者，建议选择生长周期短的蔬菜，如生菜、菠菜等，它们通常在30-45天内即可收获。\n2. 空间需求：如果您的阳台或庭院空间有限，可以选择垂直种植或种植小型品种，如樱桃番茄、迷你黄瓜等。\n3. 光照条件：根据您的种植环境光照情况选择合适的蔬菜。大部分蔬菜需要每天至少6小时的阳光照射，但也有一些耐阴品种，如菠菜、生菜等。\n4. 个人喜好：最后，当然要选择您和家人喜欢吃的蔬菜，这样才能充分享受种植的乐趣和收获的成果。",
                category: "基础种植",
                tags: ["品种选择", "初学者", "家庭种植"],
                date: "2023-04-15"
            },
            {
                id: 2,
                title: "科学浇水的小技巧",
                content: "浇水是蔬菜种植中最常见但也最容易出错的环节。以下是一些科学浇水的小技巧：\n1. 早晨或傍晚浇水：避免在中午阳光强烈时浇水，以免水分快速蒸发和灼伤植物。\n2. 根部浇水：尽量将水浇在植物根部，而不是叶子上，这样可以减少病害的发生。\n3. 见干见湿：掌握见干见湿的原则，即土壤表面干燥后再浇水，浇水要浇透。\n4. 不同植物不同需求：了解不同蔬菜的需水量，叶菜类需水量较大，而根茎类则相对较少。\n5. 使用喷壶或滴灌系统：这样可以更精确地控制浇水量，避免大水漫灌。",
                category: "浇水技巧",
                tags: ["浇水", "技巧", "灌溉"],
                date: "2023-04-20"
            },
            {
                id: 3,
                title: "自制有机肥料的方法",
                content: "自制有机肥料不仅环保，还能为您的蔬菜提供丰富的营养。以下是几种简单的方法：\n1. 厨余堆肥：收集厨房中的蔬菜果皮、咖啡渣等有机物，与土壤混合后进行堆肥。注意避免添加肉类、奶制品等易腐烂发臭的物质。\n2. 蚯蚓堆肥：利用蚯蚓分解有机物，产生的蚯蚓粪是优质的有机肥料。\n3. 草木灰：将枯枝落叶焚烧后的灰烬收集起来，富含钾元素，是很好的钾肥。\n4. 豆浆渣肥料：将剩下的豆浆渣发酵后，可以作为氮肥使用。\n使用自制有机肥时，要注意充分腐熟，避免烧根，并且要适量使用，配合其他肥料使用效果更佳。",
                category: "施肥管理",
                tags: ["有机肥料", "自制", "环保"],
                date: "2023-04-25"
            },
            {
                id: 4,
                title: "常见蔬菜病虫害的识别与防治",
                content: "蔬菜种植过程中，病虫害是常见的问题。以下是几种常见病虫害的识别与防治方法：\n1. 蚜虫：体型小，多聚集在叶片背面吸食汁液，导致叶片卷曲、发黄。防治方法：用肥皂水喷洒，或使用天然杀虫剂如辣椒水、大蒜水。\n2. 白粉病：叶片上出现白色粉末状物质，严重时会导致叶片枯萎。防治方法：保持通风，避免湿度过高，发病初期可喷洒小苏打溶液。\n3. 菜青虫：主要危害十字花科蔬菜，啃食叶片形成孔洞。防治方法：手动捕捉，或使用生物农药如BT乳剂。\n4. 根腐病：根部腐烂，植株萎蔫。防治方法：避免积水，保持土壤疏松透气，发病初期可使用多菌灵等药剂灌根。\n预防病虫害的关键是保持种植环境的清洁，定期检查植株，发现问题及时处理。",
                category: "病虫害防治",
                tags: ["病虫害", "防治", "有机种植"],
                date: "2023-05-01"
            },
            {
                id: 5,
                title: "如何判断蔬菜是否成熟可以收获",
                content: "正确判断蔬菜的收获时机对于保证蔬菜的品质和产量非常重要。以下是几种常见蔬菜的收获判断方法：\n1. 叶菜类（如生菜、菠菜）：当叶片生长到一定大小，尚未抽薹时即可收获。\n2. 果菜类（如番茄、黄瓜）：根据果实的颜色、大小和硬度判断。番茄变红、黄瓜表面有光泽时即可收获。\n3. 根茎类（如胡萝卜、萝卜）：当地上部叶片开始发黄时，地下根茎基本成熟。可以轻轻挖开土壤查看大小。\n4. 花菜类（如西兰花、花椰菜）：当花球充分长大，尚未松散时收获最佳。\n收获时要使用合适的工具，避免损伤植株，对于连续收获的蔬菜（如番茄、黄瓜），要定期采摘成熟的果实，以促进新果的生长。",
                category: "收获技巧",
                tags: ["收获", "成熟判断", "采摘"],
                date: "2023-05-05"
            },
            {
                id: 6,
                title: "阳台种菜的空间利用技巧",
                content: "在有限的阳台空间中种出丰富的蔬菜，需要一些巧妙的空间利用技巧：\n1. 垂直种植：利用阳台护栏、墙面等空间，安装垂直种植架或悬挂式花盆。\n2. 阶梯式种植：使用多层花架，按照植株高度分层种植，充分利用垂直空间。\n3. 组合种植：将不同生长习性的蔬菜组合种植，如高秆植物和矮生植物套种。\n4. 可移动花盆：使用带轮子的花盆，方便根据季节和光照需求调整位置。\n5. 利用边角空间：在阳台角落放置三角形或多边形花盆，充分利用每一寸空间。",
                category: "基础种植",
                tags: ["阳台种植", "空间利用", "垂直种植"],
                date: "2023-05-10"
            },
            {
                id: 7,
                title: "蔬菜轮作的好处与方法",
                content: "蔬菜轮作是一种有效的种植制度，可以带来多方面的好处：\n1. 减少病虫害：不同科属的蔬菜轮作可以打破病虫害的生活周期，减少病虫害的发生。\n2. 改善土壤结构：不同蔬菜的根系深浅不同，轮作可以改善土壤的物理结构和肥力分布。\n3. 均衡利用养分：不同蔬菜对养分的需求不同，轮作可以均衡利用土壤中的各种养分。\n常见的轮作模式有：叶菜类与根茎类轮作、豆科植物与其他蔬菜轮作、深根作物与浅根作物轮作等。轮作时要注意避免同科蔬菜连作，一般建议3-4年轮作一次。",
                category: "基础种植",
                tags: ["轮作", "土壤改良", "病虫害防治"],
                date: "2023-05-15"
            },
            {
                id: 8,
                title: "无土栽培的入门指南",
                content: "无土栽培是一种不使用土壤的种植方式，适合在空间有限或土壤条件不佳的环境中进行：\n1. 水培：将植物根系直接浸泡在含有营养液的水中。需要注意增氧，避免根系腐烂。\n2. 岩棉栽培：以岩棉为基质，具有良好的保水性和透气性。\n3. 椰糠栽培：以椰子纤维为基质，环保且可再生。\n4. 气雾栽培：将营养液雾化后喷洒到植物根系上，是一种高效的栽培方式。\n无土栽培需要注意营养液的配置和管理，定期检测和调整pH值和营养元素浓度。虽然初期投入较大，但具有产量高、病虫害少、省水省肥等优点。",
                category: "基础种植",
                tags: ["无土栽培", "水培", "科技种植"],
                date: "2023-05-20"
            },
            {
                id: 9,
                title: "如何延长蔬菜的保鲜期",
                content: "收获后的蔬菜保鲜是家庭种菜的最后一环，以下是一些延长蔬菜保鲜期的方法：\n1. 叶菜类：用厨房纸包裹后装入保鲜袋，放入冰箱冷藏，可以保持水分，延长保鲜期。\n2. 根茎类：如胡萝卜、土豆等，存放在阴凉通风处，避免阳光直射和潮湿。\n3. 果菜类：番茄最好不要放入冰箱，以免影响口感；黄瓜、茄子等可以用保鲜膜包裹后冷藏。\n4. 储存温度：不同蔬菜有不同的最佳储存温度，一般叶菜类适合0-4℃，果菜类适合8-12℃。\n5. 避免清洗：收获后不要立即清洗，等食用前再清洗，可以减少微生物繁殖。",
                category: "收获技巧",
                tags: ["保鲜", "储存", "蔬菜保存"],
                date: "2023-05-25"
            },
            {
                id: 10,
                title: "家庭菜园的生态种植方法",
                content: "生态种植是一种环保、可持续的种植方式，以下是一些家庭菜园中可以采用的生态种植方法：\n1. 种植蜜源植物：如向日葵、万寿菊等，可以吸引蜜蜂等益虫，帮助授粉。\n2. 间作驱虫植物：如大蒜、洋葱、薄荷等，可以驱避害虫，减少农药的使用。\n3. 建立小型生态系统：在菜园中保留一些杂草和落叶，为益虫提供栖息地。\n4. 使用天然杀虫剂：如烟草水、辣椒水等，可以有效防治病虫害，同时对环境友好。\n5. 收集雨水：设置雨水收集装置，用于浇灌蔬菜，节约水资源。\n生态种植不仅对环境有益，还能生产出更健康、更美味的蔬菜，是未来农业的发展方向。",
                category: "病虫害防治",
                tags: ["生态种植", "有机农业", "可持续发展"],
                date: "2023-06-01"
            }
        ];

        // DOM元素
        const backButton = document.getElementById('backButton');
        const searchInput = document.getElementById('searchInput');
        const categoryButtons = document.querySelectorAll('.category-btn');
        const tipsContainer = document.getElementById('tipsContainer');
        const tipModal = document.getElementById('tipModal');
        const modalOverlay = document.getElementById('modalOverlay');
        const closeModal = document.getElementById('closeModal');
        const modalTitle = document.getElementById('modalTitle');
        const modalTipTitle = document.getElementById('modalTipTitle');
        const modalTipCategory = document.getElementById('modalTipCategory');
        const modalTipDate = document.getElementById('modalTipDate');
        const modalTipContent = document.getElementById('modalTipContent');
        const modalTipTags = document.getElementById('modalTipTags');
        const shareTipBtn = document.getElementById('shareTipBtn');
        const collectTipBtn = document.getElementById('collectTipBtn');

        // 当前选中的知识项
        let currentTip = null;

        // 返回按钮功能
        backButton.addEventListener('click', () => {
            window.history.back();
        });

        // 页面初始化
        function init() {
            // 初始化搜索功能
            initSearch();
            // 初始化分类标签
            initCategories();
            // 加载知识卡片
            loadTips();
        }

        // 初始化搜索功能
        function initSearch() {
            searchInput.addEventListener('input', () => {
                filterTips();
            });
        }

        // 初始化分类标签
        function initCategories() {
            categoryButtons.forEach(button => {
                button.addEventListener('click', () => {
                    // 移除所有按钮的活跃状态
                    categoryButtons.forEach(btn => {
                        btn.classList.remove('bg-primary', 'text-white');
                        btn.classList.add('bg-white', 'text-gray-600');
                    });
                    // 添加当前按钮的活跃状态
                    button.classList.remove('bg-white', 'text-gray-600');
                    button.classList.add('bg-primary', 'text-white');
                    
                    filterTips();
                });
            });
        }

        // 过滤知识项
        function filterTips() {
            const searchTerm = searchInput.value.toLowerCase().trim();
            const activeCategory = document.querySelector('.category-btn.bg-primary')?.textContent.trim() || '全部';
            
            const filteredTips = plantingTips.filter(tip => {
                const matchesSearch = 
                    tip.title.toLowerCase().includes(searchTerm) || 
                    tip.content.toLowerCase().includes(searchTerm);
                const matchesCategory = activeCategory === '全部' || tip.category === activeCategory;
                
                return matchesSearch && matchesCategory;
            });
            
            loadTips(filteredTips);
        }

        // 加载知识卡片
        function loadTips(tips = plantingTips) {
            tipsContainer.innerHTML = '';
            
            if (tips.length === 0) {
                // 显示空状态
                const emptyState = document.createElement('div');
                emptyState.className = 'flex flex-col items-center justify-center py-12 text-center';
                emptyState.innerHTML = `
                    <i class="fa fa-book text-4xl text-gray-300 mb-4"></i>
                    <p class="text-gray-500">没有找到相关的种植小知识</p>
                    <p class="text-sm text-gray-400 mt-2">请尝试其他搜索词或分类</p>
                `;
                tipsContainer.appendChild(emptyState);
                return;
            }
            
            // 创建知识卡片
            tips.forEach((tip, index) => {
                // 限制内容显示长度
                const truncatedContent = tip.content.replace(/\n/g, ' ').substring(0, 120) + '...';
                
                const tipCard = document.createElement('div');
                tipCard.className = 'bg-white rounded-2xl p-5 shadow-card card-transition hover:shadow-card-hover hover:-translate-y-1 cursor-pointer';
                tipCard.dataset.tipId = tip.id;
                
                // 添加渐入动画延迟
                tipCard.style.opacity = '0';
                tipCard.style.transform = 'translateY(20px)';
                tipCard.style.transitionDelay = `${index * 50}ms`;
                
                tipCard.innerHTML = `
                    <div class="flex items-start justify-between mb-3">
                        <h3 class="text-lg font-bold text-gray-800">${tip.title}</h3>
                        <span class="px-3 py-1 bg-green-100 text-primary rounded-full text-xs">${tip.category}</span>
                    </div>
                    <p class="text-gray-600 mb-4 line-clamp-3">${truncatedContent}</p>
                    <div class="flex items-center justify-between text-sm text-gray-500">
                        <span>${formatDate(tip.date)}</span>
                        <div class="flex items-center">
                            <span class="mr-4"><i class="fa fa-eye mr-1"></i> ${Math.floor(Math.random() * 1000) + 100}</span>
                            <span><i class="fa fa-thumbs-up mr-1"></i> ${Math.floor(Math.random() * 100) + 10}</span>
                        </div>
                    </div>
                `;
                
                // 添加点击事件
                tipCard.addEventListener('click', () => {
                    showTipDetail(tip);
                });
                
                tipsContainer.appendChild(tipCard);
                
                // 触发动画
                setTimeout(() => {
                    tipCard.style.opacity = '1';
                    tipCard.style.transform = 'translateY(0)';
                }, 10);
            });
        }

        // 格式化日期
        function formatDate(dateString) {
            const date = new Date(dateString);
            return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
        }

        // 显示知识详情
        function showTipDetail(tip) {
            currentTip = tip;
            
            modalTipTitle.textContent = tip.title;
            modalTipCategory.textContent = tip.category;
            modalTipDate.textContent = formatDate(tip.date);
            
            // 将内容中的换行符转换为<br>
            modalTipContent.innerHTML = tip.content.replace(/\n/g, '<br><br>');
            
            // 添加标签
            modalTipTags.innerHTML = '';
            tip.tags.forEach(tag => {
                const tagElement = document.createElement('span');
                tagElement.className = 'px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-xs';
                tagElement.textContent = tag;
                modalTipTags.appendChild(tagElement);
            });
            
            // 重置收藏按钮状态
            collectTipBtn.innerHTML = '<i class="fa fa-star-o mr-1"></i> 收藏';
            collectTipBtn.classList.remove('bg-primary', 'text-white');
            collectTipBtn.classList.add('border-primary', 'text-primary');
            
            // 显示模态框
            tipModal.classList.remove('hidden');
            // 添加淡入动画
            setTimeout(() => {
                tipModal.querySelector('.relative').classList.add('animate-fadeIn');
            }, 10);
        }

        // 关闭模态框
        function hideModal() {
            tipModal.classList.add('hidden');
        }

        // 分享功能
        function shareTip() {
            if (currentTip) {
                // 检查是否支持原生分享API
                if (navigator.share) {
                    navigator.share({
                        title: currentTip.title,
                        text: currentTip.content.substring(0, 100) + '...',
                        url: window.location.href
                    }).then(() => {
                        showToast('分享成功');
                    }).catch((error) => {
                        showToast('分享失败，请稍后再试');
                        console.error('分享失败:', error);
                    });
                } else {
                    // 降级方案：复制链接
                    const textToCopy = `${currentTip.title}\n${window.location.href}`;
                    navigator.clipboard.writeText(textToCopy).then(() => {
                        showToast('链接已复制到剪贴板');
                    }).catch(() => {
                        showToast('复制失败，请手动复制');
                    });
                }
            }
        }

        // 收藏功能
        function collectTip() {
            if (currentTip) {
                // 切换收藏状态
                const isCollected = collectTipBtn.classList.contains('bg-primary');
                
                if (isCollected) {
                    collectTipBtn.innerHTML = '<i class="fa fa-star-o mr-1"></i> 收藏';
                    collectTipBtn.classList.remove('bg-primary', 'text-white');
                    collectTipBtn.classList.add('border-primary', 'text-primary');
                    showToast('已取消收藏');
                } else {
                    collectTipBtn.innerHTML = '<i class="fa fa-star mr-1"></i> 已收藏';
                    collectTipBtn.classList.remove('border-primary', 'text-primary');
                    collectTipBtn.classList.add('bg-primary', 'text-white');
                    showToast('收藏成功');
                }
            }
        }

        // 提示消息函数
        function showToast(message) {
            // 检查是否已存在toast元素
            let toast = document.getElementById('toastMessage');
            if (!toast) {
                toast = document.createElement('div');
                toast.id = 'toastMessage';
                toast.className = 'fixed bottom-20 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-6 py-3 rounded-full shadow-lg z-50 transition-opacity duration-300';
                document.body.appendChild(toast);
            }
            
            toast.textContent = message;
            toast.style.opacity = '1';
            
            setTimeout(() => {
                toast.style.opacity = '0';
            }, 2000);
        }

        // 绑定事件
        closeModal.addEventListener('click', hideModal);
        modalOverlay.addEventListener('click', hideModal);
        shareTipBtn.addEventListener('click', shareTip);
        collectTipBtn.addEventListener('click', collectTip);

        // ESC键关闭模态框
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape' && !tipModal.classList.contains('hidden')) {
                hideModal();
            }
        });

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', init);
    </script>
    
    <!-- 底部导航Tab -->
    <nav class="tab-bar fixed bottom-0 left-0 right-0 flex items-center justify-around py-2 border-t border-gray-200 bg-white">
        <a href="home.html" class="tab-item flex flex-col items-center py-2 px-3 text-gray-500">
            <i class="fa fa-home text-lg"></i>
            <span class="text-xs mt-1">首页</span>
        </a>
        <a href="growing-plants.html" class="tab-item flex flex-col items-center py-2 px-3 text-gray-500">
            <i class="fa fa-leaf text-lg"></i>
            <span class="text-xs mt-1">菜园</span>
        </a>
        <a href="task.html" class="tab-item flex flex-col items-center py-2 px-3 text-gray-500">
            <i class="fa fa-tasks text-lg"></i>
            <span class="text-xs mt-1">任务</span>
        </a>
        <a href="reminders.html" class="tab-item flex flex-col items-center py-2 px-3 text-gray-500">
            <i class="fa fa-bell text-lg"></i>
            <span class="text-xs mt-1">提醒</span>
        </a>
        <a href="profile.html" class="tab-item flex flex-col items-center py-2 px-3 text-gray-500">
            <i class="fa fa-user text-lg"></i>
            <span class="text-xs mt-1">我的</span>
        </a>
    </nav>
</body>
</html>
